<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = $state([1, 2, 3, 4, 5]);
const [ parent1 ] = useDragAndDrop<number>(list, {
  droppableGroup: "group1",
});

const list2 = $state([6, 7, 8, 9, 10]);
const [ parent2 ] = useDragAndDrop<number>(list2, {
  droppableGroup: "group1 group2",
  direction: "horizontal",
});
</script>
<div class="group-list bg-[var(--sl-color-gray-6)]">
  <ul use:parent1 class="number-list">
    {#each list as element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </ul>
  <div use:parent2 class="number-list-h">
    {#each list2 as element, index (element)}
      <div
        class="number"
        data-index={index}
      >
        { element }
      </div>
    {/each}

  </div>
</div>
<style>
.number {
  border-style: solid;
  padding-left: 10px;
  padding-block: 5px;
  margin-top: 0.25rem !important;
  border-width: 2px;
  border-color: var(--sl-color-gray-1);
  color: var(--sl-color-gray-2);
  min-width: 120px;
  width: 120px;
}

.number-list {
  display: block;
  height: 290px;
  overflow-y: auto;
  background-color: var(--sl-color-gray-5);
  padding: 1.5rem;
}
.number-list-h {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  padding-inline: 25px;
  margin-top: 0 !important;
  padding: 1.5rem;
}
</style>
